<template>
  <div class="user-wrap">
    <!-- 搜索框 start -->
    <el-form
      class="main-search"
      :inline="true"
      :model="keywords"
      ref="keywords"
      label-position="left"
      label-width="85px"
      size="medium"
    >
      <el-form-item label="记谱内容" prop="comment">
        <el-input
          type="text"
          v-model="keywords.comment"
          placeholder="请输入记谱内容"
        ></el-input>
        <el-button style="margin-left: 20px" type="primary" @click="onSearch"
          >搜索</el-button
        >
        <el-button @click="onReset('keywords')">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 搜索框 end -->
    <!-- 分割线 start -->
    <div class="hr-10"></div>
    <!-- 分割线 end -->

    <div class="main-content">
      <div class="content-header">
        <el-button type="primary" size="medium" @click="handleAdd"
          >新增记谱</el-button
        >
        <el-button
          type="danger"
          size="medium"
          :disabled="!dels.length"
          @click="handleDelete(false)"
          >批量删除</el-button
        >
      </div>
      <el-table
        @selection-change="
          (val) => {
            dels = val;
          }
        "
        v-loading="!this.reqFlag.search"
        :data="tableData"
        header-row-class-name="table-header"
        border
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="open_id"
          label="open_id"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="nickName"
          label="用户名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="photo"
          label="记谱图片"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="comment"
          label="记谱内容"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              @click="handleDelete(scope.row.id)"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="totalCount"
      >
      </el-pagination>
    </div>

    <!-- 新增专辑 start -->
    <Add v-if="showFlag.add" ref="add" @addCallBack="callBackAdd" />
    <!-- 新增专辑 end -->

    <!-- 编辑专辑 start -->
    <Edit v-if="showFlag.edit" ref="edit" @editCallBack="callBackEdit" />
    <!-- 编辑专辑 end -->
  </div>
</template>

<script>
import { jipuList, jipuDel } from "@/config/interface";
import Add from "@/components/jipu/Add";
import Edit from "@/components/jipu/Edit";
export default {
  data() {
    return {
      keywords: {
        comment: "",
      },
      dels: [], //批量删除的数据
      keywordsParams: {}, // 搜索请求是的搜索入参
      searchRules: {},
      reqFlag: {
        // 防止频繁点击，造成连续多次发请求
        search: true,
        state: true,
        delete: true,
      },
      pageNum: 1, // 请求第几页
      pageSize: 6, // 每页请求多少条
      currentPage: 1, // 初始时在第几页
      totalCount: 0, // 总共多少条数据
      tableData: [],
      showFlag: {
        add: false,
        edit: false,
      },
    };
  },
  components: {
    Add,
    Edit,
  },
  created() {
    // this.keywordsParams = JSON.parse(JSON.stringify(this.keywords))
    this.queryUserList();
  },
  methods: {
    onReset(formName) {
      this.$refs[formName].resetFields();
      this.pageNum = 1;
      this.keywordsParams = JSON.parse(JSON.stringify(this.keywords));
      this.queryUserList();
      this.curPage = 1;
    },
    onSearch() {
      this.pageNum = 1;
      this.keywordsParams = JSON.parse(JSON.stringify(this.keywords));
      this.queryUserList();
    },
    queryUserList() {
      const url = jipuList;
      if (this.reqFlag.search) {
        this.reqFlag.search = false;
        let params = {
          page: this.pageNum,
          keywords: this.keywords.comment,
        };
        this.$http(url, params).then((res) => {
          if (res.code == 1) {
            this.tableData = res.data;
            this.totalCount = res.total;
          }
          this.reqFlag.search = true;
        });
      }
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryUserList();
    },
    handleAdd() {
      this.showFlag.add = true;
      this.$nextTick(() => {
        this.$refs.add.init();
      });
    },
    handleEdit(row) {
      this.showFlag.edit = true;
      this.$nextTick(() => {
        this.$refs.edit.init(row.id);
      });
    },
    async handleDelete(id) {
      const bool = await this.$confirm("是否确定删除此专辑？", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "messagebox-cancel-button",
        dangerouslyUseHTMLString: true,
        type: "warning",
      }).catch((err) => err);
      console.log(bool, "bool");
      if (bool == "confirm") {
        const url = jipuDel;
        if (this.reqFlag.delete) {
          this.reqFlag.delete = false;
          let params = id ? [id] : this.dels.map((e) => e.id);
          this.$http(url, params).then((res) => {
            if (res.code == 1) {
              this.$common.toast("删除成功", "success", false);
              this.queryUserList();
            }
            this.reqFlag.delete = true;
          });
        }
      }
    },
    // 新增管理员子组件回调
    callBackAdd() {
      this.queryUserList();
    },
    // 编辑管理员子组件回调
    callBackEdit() {
      this.queryUserList();
    },
  },
};
</script>

<style lang="scss">
.user-wrap {
  /* height: 1800px; background: pink; */
  .el-table {
    .el-select {
      width: 76px;
    }
    .el-input__inner {
      color: inherit;
    }
  }
}
</style> 